<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeCat Mirror Demo</title>

    <style>
        body {
            margin: 0
        }

        .iframe-container {
            margin-top: 20px;
            padding-bottom: 20px;
            background: white;
            text-align: center;
            white-space: nowrap;
        }

        iframe {
            max-width: 100%;
            width: 400px;
            display: inline-block;
            margin: 10px;
            border: 2px solid grey;
            min-height: 600px;

        }

        iframe.player {
            margin-left: 0;
            margin-right: 0;
            width: 250px;
        }

        @media only screen and (max-width: 500px) {
            .iframe-container {
                white-space: normal;
            }

            iframe {
                padding: 0;
            }
        }

        .container {
            padding: 20px;
        }
    </style>
</head>

<body>
    <a style="position: absolute; z-index: 100; right: 0" href="https://github.com/oct16/TimeCat">
        <img width="100" height="100"
            src=""
            alt="Fork me on GitHub" />
    </a>
    <div class="container">
        <div class="iframe-container">

            <iframe id="recorder" src="./mirror-recorder.html" align="top" onload="resizeIframe(this)"
                frameborder="0"></iframe>

            <iframe class="player" src="./mirror-player.html" align="top" onload="resizeIframe(this)"
                frameborder="0"></iframe>
            <iframe class="player" src="./mirror-player.html" align="top" onload="resizeIframe(this)"
                frameborder="0"></iframe>
        </div>
    </div>

    <script>
        function resizeIframe(target) {
            target.height = target.contentDocument.documentElement.offsetHeight
        }
        window.onresize = function () {
            setTimeout(() => {
                Array.from(window.frames).forEach(frame => {
                    resizeIframe(frame.frameElement)
                })
            }, 250)
        }
    </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-151180797-1"></script>
    <script>
        if (!~['localhost', '127.0.0.1'].indexOf(document.location.hostname)) {
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'UA-151180797-1');
        }
    </script>
</body>

</html>
